<template>
  <view class="ver-layout">
    <u-tabs :list="list1" @click="click" :itemStyle="tabStyle" class="tab-layout" lineColor="#55BBB3"
            :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
    <view class="list-page">
      <view v-if="filterMessageList.length">
        <view v-for="(item,index) in filterMessageList" :key="index" class="message-item ver-layout">
          <view class="title">{{ item.title }}</view>
          <view class="content">{{ item.content }}</view>
        </view>
      </view>
      <u-empty v-else mode="message" marginTop="100"></u-empty>
    </view>
  </view>
</template>

<script>

export default {
  name: "messageList",
  components: {},
  data() {
    return {
      activeStyle: {
        color: '#55BBB3'
      },
      inactiveStyle: {},
      tabStyle: {
        height: '50px',
        width: 'fit-content',
        padding: '0px 30px',
        background: 'white'
      },
      selTab: {name: 'ALL'},
      list1: [
        {name: 'ALL',},
        {name: 'Account Notification',},
        {name: 'System Notification'}],
      messageList: [
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
        {title: 'others', content: 'You bind your google successfully, 50 VIP points for you!,50 VIP points for you'},
      ]
    }
  },
  computed: {
    filterMessageList() {
      if (this.selTab.name == this.list1[0].name || this.selTab.name == this.list1[2].name)
        return this.messageList
      else return []
    }
  },
  methods: {
    click(item) {
      console.log('item', item);
      this.selTab = item
    }
  }
}
</script>

<style scoped lang="scss">
.tab-layout {
  position: fixed;
}

.list-page {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 100%;
  border-top: 2px solid #eaeaea;
}

.message-item {
  font-size: smaller;
  margin: 10px;
  margin-bottom: 0px;
  padding: 10px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 3px #d9d9d9;

  .content {
    margin-top: 5px;
  }
}
</style>
